<template>
   <div class="account-add">
    <HeaderTitle :textObj="textObj" @add="onAdd" right-text="新增"></HeaderTitle>
    <div class="mainContent">
      <!-- 用户名 -->
      <div class="form-item">
        <span class="label">用户名：</span>
        <el-input 
          v-model="formData.username" 
          style="width: 240px" 
          placeholder="请输入用户名"
          clearable
        />
      </div>
      <!-- 账号 -->
      <div class="form-item">
        <span class="label">账号：</span>
        <el-input 
          v-model="formData.account" 
          style="width: 240px" 
          placeholder="请输入账号"
          clearable
        />
      </div>
      <!-- 密码 -->
      <div class="form-item">
        <span class="label">密码：</span>
        <el-input
          v-model="formData.password"
          style="width: 240px"
          type="password"
          placeholder="请输入密码"
          show-password
          clearable
        />
      </div>
      <!-- 类型 -->
      <div class="form-item">
        <span class="label">类型：</span>
        <el-radio-group v-model.number="formData.type">
          <el-radio :value="3">超级管理员（所有权限）</el-radio>
          <el-radio :value="6">管理员（拥有部分权限）</el-radio>
          <el-radio :value="9">观察员（只读权限）</el-radio>
        </el-radio-group>
      </div>
      <!-- 描述 -->
      <div class="form-item">
        <span class="label">描述：</span>
        <el-input
          v-model="formData.desc"
          style="width: 240px"
          :rows="5"
          type="textarea"
          placeholder="请输入描述"
        />
      </div>
      <!-- 操作按钮 -->
      <div class="action-btns">
        <el-button type="primary" @click="handleSubmit">确认</el-button>
        <el-button @click="handleCancel">取消</el-button>
      </div>
    </div>
   </div>   
</template>
   
<script setup>   
import { ref } from 'vue';   
import { ElMessage, ElMessageBox } from 'element-plus';   
import axios from 'axios'; 
import {accountAdd} from '../../api/index';  
import HeaderTitle from '../../components/HeaderTitle.vue';
   
const textObj = {
   module: '子账号',
   name: '添加子账号',
   desc: '可添加当前组织的子账号，并为其分配权限。',       
}
   
// 表单数据   
const formData = ref({
   username: '',
   account: '',
   password: '',
   type: 3,
   desc: ''   
})
   
// 提交表单   
// const handleSubmit = async () => {
//    try {
//     // 简单校验必填项
//     if (!formData.value.username.trim() || 
//         !formData.value.account.trim() || 
//         !formData.value.password.trim()) {
//       ElMessage.warning('请填写完整信息')
//       return
//     }
//     // 调用接口
//     // const response = await axios.post('http://43.136.85.99:3007/account/add', {
//     //   username: formData.value.username,
//     //   account: formData.value.account,
//     //   type: formData.value.type,
//     //   desc: formData.value.desc,
//     //   // 注意：根据接口文档，请求参数中没有密码字段，这里需要确认是否需要传递
//     //   // 如果接口实际需要密码字段，请取消下面这行注释
//     //   // password: formData.value.password
//     // })
//         const response = await accountAdd(
//             {
//       username: formData.value.username,
//       account: formData.value.account,
//       type: formData.value.type,
//       desc: formData.value.desc,
//       // 注意：根据接口文档，请求参数中没有密码字段，这里需要确认是否需要传递
//       // 如果接口实际需要密码字段，请取消下面这行注释
//       // password: formData.value.password
//     }
//         )


//     if (response.data.code === 666) {
//       ElMessage.success('添加成功')
//       // 清空表单
//       handleCancel()
//       // 这里可以添加跳转到列表页的逻辑
//     } else {
//       ElMessage.error(response.data.msg || '添加失败')
//     }
//    } catch (error) {
//     console.error('添加失败:', error)
//     ElMessage.error('添加失败，请检查网络或联系管理员')
//    }   
// }
   
const handleSubmit = async () => {
   try {
    // 校验逻辑保持不变...
    // 调用接口（添加密码字段）
    const response = await accountAdd({
      username: formData.value.username,
      account: formData.value.account,
      password: formData.value.password, // 取消注释传递密码
      type: formData.value.type,
      desc: formData.value.desc
    })
    // 调试输出响应结构
    console.log('完整响应:', response) 
    // 调整判断逻辑（根据实际响应结构）
    if (response.code === 666) { // 注意这里去掉了.data
      ElMessage.success('添加成功')
      handleCancel()
    } else {
      ElMessage.error(response.msg || '添加失败') // 同样去掉.data
    }
   } catch (error) {
    console.error('添加失败:', error)
    ElMessage.error('添加失败，请检查网络或联系管理员')
   }   
}
// 取消/重置表单   
const handleCancel = () => {
   formData.value = {
    username: '',
    account: '',
    password: '',
    type: 3,
    desc: ''
   }   
}   
</script>

<style scoped>
.account-add {
  padding: 20px;
}
.mainContent {
  margin-top: 10px;
  background-color: #fff;
  height: 500px;
  padding-left: 60px;
  padding-top: 10px;
  display: flex;
  flex-direction: column;
}
.el-input {
  margin-bottom: 10px;
}
.el-radio-group {
  margin-bottom: 10px;
}
.el-textarea {
  margin-bottom: 10px;
}
.form-item {
   margin-bottom: 20px;   
}   
.label {
   display: inline-block;
   width: 80px;
   margin-right: 10px;   
}   
.action-btns {
   margin-top: 30px;
   margin-left: 90px;   
}   
.action-btns .el-button {
   width: 100px;   
}   
</style>